<template>
  <div class="page-container">
    <div class="top flex-row">
      <div class="title">渠道抽佣比例设置</div>
      <div class="btns">
        <a-button style="margin-right: 16px" @click="goOperateFn">操作记录</a-button>
        <a-button type="primary" @click="onAddChannel">
          <template #icon>
            <icon-plus />
          </template>
          新增渠道
        </a-button>
      </div>
    </div>
    <!-- 表格 -->
    <tableModel ref="tableModalRef" style="width: 52%" @submit="submit" />
    <SysdictModal ref="sysdictModal" maxLength="99999" @save="loadData" />
    <operate-log-model ref="operate" />
  </div>
</template>
<script setup name="CommissionSettings">
  import { updateCommission } from '@/api/system/commission'
  import SysdictModal from '@/components/sysdict/sysdict-modal.vue'
  import operateLogModel from './components/operate-log-modal.vue'
  import tableModel from './components/table-modal.vue'
  import { ref } from 'vue'

  const tableModalRef = ref()
  const operate = ref(null)
  const sysdictModal = ref(null)
  const goOperateFn = () => {
    operate.value.open()
  }

  const dictCode = 'short_order_channel_type'
  const onAddChannel = () => {
    sysdictModal.value.show(null, dictCode)
  }

  const submit = (record) => {
    const param = [
      {
        id: record.id,
        channelType: record.channelType,
        subject: record.subject,
        commissionRate: record.commissionRate,
        operateSource: 1,
      },
    ]

    updateCommission(param).then(() => {
      if (tableModalRef.value) {
        tableModalRef.value.loadData()
      }
    })
  }
  const loadData = () => {
    tableModalRef.value && tableModalRef.value.loadData()
  }
</script>
<style lang="less" scoped>
  .flex-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .page-container {
    .top {
      width: 52%;
      justify-content: space-between;
      margin-bottom: 15px;
      .title {
        font-weight: 500;
        font-size: 16px;
        color: #1d2129;
        line-height: 22px;
      }
    }
  }
</style>
